<template>
  <div class="webpage-setting">
    <a-menu class="setting-menu" v-model:selectedKeys="current">
      <a-menu-item key="common">
        <template #icon>
          <mail-outlined />
        </template>
        通用
      </a-menu-item>
<!--      <a-menu-item key="auto">-->
<!--        <template #icon>-->
<!--          <appstore-outlined />-->
<!--        </template>-->
<!--        我的自定义-->
<!--      </a-menu-item>-->
    </a-menu>
    <div class="common" v-if="current[0] === 'common'">
      <a-list item-layout="horizontal" :data-source="data">
        <template #renderItem="{ item }">
          <a-list-item>
            <a-list-item-meta :description="item.desc">
              <template #title>
                <a-tag :key="index" v-for="(tag, index) in item.cmds" color="cyan">{{ tag }}</a-tag>
              </template>
              <template #avatar>
                <a-avatar :src="item.icon" />
              </template>
            </a-list-item-meta>
            <div>
              <a-switch @change="() => changeItemState(item)" v-model:checked="item.checked" />
            </div>
          </a-list-item>
        </template>
      </a-list>
    </div>
<!--    <div class="auto" v-if="current[0] === 'auto'">-->
<!--      <a-button @click="showSettings" type="primary">-->
<!--        <template #icon><PlusCircleOutlined /></template>-->
<!--        创建自定义-->
<!--      </a-button>-->
<!--    </div>-->
<!--    <a-drawer-->
<!--      width="100%"-->
<!--      v-model:visible="visible"-->
<!--      class="custom-class"-->
<!--      title="添加自定义搜索"-->
<!--      placement="right"-->
<!--    >-->
<!--      <a-form-->
<!--        :model="formState"-->
<!--        name="basic"-->
<!--        :label-col="{ span: 8 }"-->
<!--        :wrapper-col="{ span: 16 }"-->
<!--      >-->
<!--        <a-form-item-->
<!--          label="logo"-->
<!--          name="logo"-->
<!--        >-->
<!--          <a-input v-model:value="formState.icon" />-->
<!--        </a-form-item>-->

<!--        <a-form-item-->
<!--          label="站点名称"-->
<!--          name="explain"-->
<!--        >-->
<!--          <a-input v-model:value="formState.explain" />-->
<!--        </a-form-item>-->

<!--        <a-form-item-->
<!--          label="站点英文名"-->
<!--          name="code"-->
<!--        >-->
<!--          <a-input v-model:value="formState.code" />-->
<!--        </a-form-item>-->
<!--        <a-form-item-->
<!--          label="站点搜索地址"-->
<!--          name="desc"-->
<!--        >-->
<!--          <a-input v-model:value="formState.desc" />-->
<!--        </a-form-item>-->
<!--        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">-->
<!--          <a-button type="primary" html-type="submit">Submit</a-button>-->
<!--        </a-form-item>-->
<!--      </a-form>-->
<!--    </a-drawer>-->
  </div>

</template>
<script lang="ts" setup>
import {ref} from "vue";
import { PlusCircleOutlined } from "@ant-design/icons-vue";

import {features, featureSetting} from "./features";

const current = ref<string[]>(['common']);

const dbId = "rubick-ui-webpage-open";

const data = ref(featureSetting.map((defaultFe) => {
  const features = window.rubick?.getFeatures() || [];
  let checked = false;
  features.some((fe) => {
    checked = defaultFe.code === fe.code;
    return checked;
  });
  return {
    ...defaultFe,
    checked,
  }
}));

const changeItemState = (item) => {
  if (item.checked) {
    window.rubick?.setFeature(JSON.parse(JSON.stringify(item)));
  }
  if (!item.checked) {
    window.rubick?.removeFeature(item.code);
  }
}

const visible = ref(false);

const showSettings = () => {
  visible.value = true;
};

</script>
<style lang="less">
.webpage-setting {
  display: flex;
  height: 100vh;
  .setting-menu {
    width: 200px;
  }
}
.common {
  flex: 1;
  padding: 10px;
}
.auto {
  flex: 1;
  text-align: center;
  padding-top: 50px;
}
</style>
